import React from 'react'
import { CellBody, Select, Form, FormCell, CellHeader, CellsTitle, Label,Cells, Cell } from 'react-weui'
export default class ProductSelectColorAndSize extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            colorAndSize: [],
            color: [],
            size: [],
            goods: {},
            filterPic: null,
            filterStock: null

        }
    }
     componentWillReceiveProps(nextProps) {
        if(nextProps.goodData!==undefined) {
            this.setState({ 
                colorAndSize: nextProps.goodData.SizeAndColor, 
                color: nextProps.goodData.color,
                size: nextProps.goodData.size,
                goods: nextProps.goodData.goods
            })
        }
    }
    handleChange(e) {
        var arr = e.target.value.split(':');
        var colorId = arr[0];
        var sizeId = arr[1];
        var filterPic;
        var filterStock;
        if (isNaN(sizeId) && isNaN(colorId)) {
            this.props.getColorIdAndSizeId(null, null);
            filterPic = 'http://' + this.props.goodData.goods.thumb;
            filterStock = this.props.goodData.goods.total_amount;
        }else {
            this.props.getColorIdAndSizeId(colorId, sizeId);
            filterPic = 'http://' + this.state.color.filter(item => item.colorId== colorId)[0].colorPic;
            filterStock = this.state.colorAndSize.filter(item => item.colorId==colorId && item.sizeId==sizeId)[0].stock
        }
        this.setState({
            filterPic,
            filterStock
        })
    }
	render() {
        const { size, color, goods, filterPic, filterStock, colorAndSize } = this.state;
        var data = colorAndSize && colorAndSize.map(function(item, i) {
            return {
                value: `${item.colorId}:${item.sizeId}`,
                label: color.filter(c=> c.colorId==item.colorId)[0].colorName + ' : ' + size.filter(s=> s.sizeId==item.sizeId)[0].sizeName
            }
        });
        data = [{
           value: null + ':' + null,
           label: '默认' 
        }].concat(data);
		return (
            <div> 
                <Cell>
                    <CellHeader style={{position: 'relative', marginRight: '10px',width:'100px'}}>
                      <img src={filterPic===null?'http://' + goods.thumb : filterPic} style={{ width: '55px',height:'55px' }} />
                    </CellHeader>
                    <CellBody>
                        <p style={{ color: 'orange', fontSize: '1.3em'}}>￥{goods.price}</p>
                        <p style={{ fontSize: '13px', color: '#888888' }}>库存：{filterStock===null?goods.total_amount: filterStock}</p>
                    </CellBody>
                </Cell>
                <Form>
                   <CellsTitle>选择款式</CellsTitle>
                    <FormCell select selectPos="after">
                        <CellHeader style={{fontSize: '0.8em' }}>
                            <Label>颜色 尺寸</Label>
                        </CellHeader>
                        <CellBody>
                            <Select style={{ color: 'orange', fontSize: '0.8em' }} data={data} onChange={this.handleChange.bind(this)} />
                        </CellBody>
                    </FormCell>
                </Form>
            </div>
		);
	}
}
